<!DOCTYPE html>
<html>
<head>
<include file="Public:header" />
<!-- jqgrid-->
<link href="__ACSS__/plugins/jqgrid/ui.jqgrid.css?0820" rel="stylesheet">
<style>
	.nav-justified{ margin-bottom:-1px;}
	.nav-justified li.active{ background:#fff;}
	.ibox{ border:1px solid #dddddd;}
	.ibox-content{ border-top:0;}
	
	.dd-handle-btn{ position:absolute; right:0; top:0;}
   	#nestable ol li.dd-item .dd-handle{ background:#e6e6e6; font-weight:bold; height:35px; border-top:1px solid #dddddd; border-left:1px solid #dddddd; border-right:1px solid #dddddd; border-bottom:0; margin:0; border-radius:0;}
   	#nestable ol li.dd-item .panel-body{ padding:10px;}
   	#nestable ol li.dd-item .panel-body span{ display:inline; padding:0 10px; line-height:24px;}
   	.dd-handle-btn button{ margin:4px 4px 0 0;}
   	.main-panel{ border-radius:0; margin-top:-6px;}
   	.sub-panel{ margin-bottom:0;}
   	.sub-panel .panel-heading{ padding:1px 8px; background:#fafafa; position:relative;}
   	.sub-panel .panel-heading a{ margin-left:5px;}
   	.sub-panel .panel-heading .sub-panel-menu-box{ position:absolute; top:1px; right:8px;}
   	.panel-body{ padding:1px 0;}
   	.right{ float:right;}
   	.dd-list li{ padding-bottom:1px;}
   	.sub-panel .panel-body{ overflow:hidden;}
   	.sub-panel .panel-body .row div{ border-left:1px solid #ddd; margin:5px 0;}
   	.sub-panel .panel-body .row div font{ color:#444;}
   	.sub-panel .panel-body .row div a{ color:#999;}
   	
   	.file-preview-frame{ margin:8px; border:1px solid #ddd; box-shadow:1px 1px 5px 0px #a2958a; float:left; padding:6px; text-align:center; vertical-align:middle;}
</style>
</head>
<body class="gray-bg">
    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="row">
        	<p style="margin-left:15px;">
           		<button class="btn btn-primary left btn-sm" type="button" id="add">添加焦点图</button>
           	</p>
            <div class="col-sm-12">
            	<ul class="nav nav-tabs nav-justified">
				    <li class="active" id="is-on" ref="1"><a href="javascript:void(0)">已启用</a></li>
				    <li id="is-off" ref="2"><a href="javascript:void(0)">未启用</a></li>
			    </ul>
                <div class="ibox">
                	<div class="ibox-content" id="is-on-box">
	                  	<div role="alert" class="alert alert-info"><strong>点击标题可以进行拖动排序</strong></div>
                    	<div class="dd" id="nestable">
	                        <ol class="dd-list">
	                        	<foreach name="vo" item="vo">
	                        		<li class="dd-item" ref="<{$vo.id}>" data-id="<{$key+1}>">
		                            	<div class="dd-handle"><{$vo.title}></div>
		                            	<div class="panel panel-default main-panel">
			                                <div class="dd-handle-btn">
			                                	<button class="btn btn-outline btn-default btn-xs edit-menu-btn" type="button" onclick="updateStatus(<{$vo.id}>,2)" ref="<{$vo.id}>">停用</button>
			                                	<button class="btn btn-outline btn-default btn-xs edit-menu-btn" type="button" onclick="edit(<{$vo.id}>)" ref="<{$vo.id}>">修改</button>
			                                	<button class="btn btn-outline btn-default btn-xs del-menu-btn" type="button" onclick="del(<{$vo.id}>)" ref="<{$vo.id}>">删除</button>
			                                </div>
			                                <div class="file-preview-frame">
												<span class="file-preview-image"><img alt="" width="100%" src="__IMGROOT__<{$vo.img_web}>"></span>
											</div>
			                                <div class="clearfix"></div>
		                                </div>
		                            </li>
								</foreach>
	                        </ol>
	                    </div>
	                    <div class="hide">
		                    <textarea id="nestable-output" class="form-control"></textarea>
	                    </div>
                    </div>
                    <div class="clearfix"></div>
                    <div class="ibox-content" id="is-off-box" style="display:none;">
                        <div class="jqGrid_wrapper">
                            <table id="table_list"></table>
                            <div id="pager_list"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
<!-- 全局js -->
<include file="Public:foot" />
<!-- jqGrid -->
<script src="__AJSPLUGINS__/jqgrid/i18n/grid.locale-cn.js?0820"></script>
<script src="__AJSPLUGINS__/jqgrid/jquery.jqGrid.min.js?0820"></script>
<!-- Nestable List -->
<script src="__AJSPLUGINS__/nestable/jquery.nestable.js"></script>
<script>
$(document).ready(function () {
	//初始化
    $.jgrid.defaults.styleUI = 'Bootstrap';
    $("#table_list").jqGrid({
    	url : '__URL__/getAllData',
    	datatype: "json",
        height: 580,
        autowidth: true,
        shrinkToFit: true,
        rowNum: 15,
        rowList: [10, 15, 30, 50],
        colNames: ['ID', '图片', '标题', '是否开启'],
        colModel: [ {name : 'id',index : 'id'},
                    {name : 'img_web',index : 'img_web',formatter : function(cellvalue, options, rowObject){
                    		var content = '<img style="height:50px;" src="';
                    		content += "__IMGROOT__"+cellvalue;
                    		content += '"/>';
                           	return content;
                    	}},
                    {name : 'title',index : 'title'},
                    {name : 'is_on',index : 'is_on',sortable : false,formatter : function(cellvalue, options, rowObject){
                       	 if(cellvalue == 1) {
                       		 content = '<button class="btn btn-white btn-xs btn-outline" onclick="updateStatus('+ rowObject.id +','+ 2 +')"><i class="fa fa-toggle-on"></i>  停用</button>';
                       	 }else if(cellvalue == 2) {
                       		 content = '<button class="btn btn-white btn-xs btn-outline" onclick="updateStatus('+ rowObject.id +','+ 1 +')"><i class="fa fa-toggle-off"></i>  开启</button>';
                       	 }
                       	 content += ' <button class="btn btn-white btn-xs btn-outline" onclick="edit('+ rowObject.id +')"><i class="fa fa-edit"></i>  修改</button>';
                       	 content += ' <button class="btn btn-white btn-xs btn-outline" onclick="del('+ rowObject.id +')"><i class="fa fa-trash-o"></i>  删除</button>';
                       	 return content;
                   	 }}
        		],
        pager: "#pager_list",
        viewrecords: true,
        hidegrid: false,
        sortname: "id",
        sortorder: "desc",
    });

 // 设置按钮
    $("#table_list").jqGrid('navGrid', '#pager_list', {
        edit: false,
        add: false,
        del: false,
        search: false
    }, {
        height: 200,
        reloadAfterSubmit: true
    });
    // 添加适配响应
    $(window).bind('resize', function () {
        var width = $('.jqGrid_wrapper').width();
        $('#table_list').setGridWidth(width);
    });
    
    
  //Nestable插件
    var updateOutput = function (e) {
        var list = e.length ? e : $(e.target),
            output = list.data('output');
        if (window.JSON) {
            output.val(window.JSON.stringify(list.nestable('serialize'))); //, null, 2));
        } else {
            output.val('浏览器不支持');
        }
    };
    // activate Nestable for list 1
    $('#nestable').nestable({
        group: 1,
        maxDepth: 1
    }).on('change', function() {
    	setTimeout("$('.main-panel').slideDown(300)", 300);
    	//交互数据库更新排序
    	var nestableVal = $("#nestable-output").val();
    	updateOutput($('#nestable').data('output', $('#nestable-output')));
    	if(nestableVal != $("#nestable-output").val()) {
    		var layerIndex = layer.load(2, {
    		    shade: [0.3,'#FFF']
    		});
    		var arr = [];
    		$(".dd-item").each(function(index) {
    			arr[index] = $(this).attr("ref");
        	})
        	$.ajax({
				url:"__URL__/updateSeq",
				type:"post",
				data:{'seq':arr},
				success:function(json){
					var data = eval("("+json+")");
					if(data.status == 1){
						layer.msg(data.info, {time: 1000});
					}else{
						layer.msg(data.info, {time: 1000});
						window.location.reload();
					}
					layer.close(layerIndex);
				}
			})
    	}
    });
    
    $('.dd-handle').on('mousedown', function(e){
        $(".main-panel").slideUp(300);
    });
    
    
  //重新绘制图片尺寸
    function resizeView() {
    	if($(".file-preview-image").width() > $(".main-panel").width()) {
    		$(".file-preview-image").find("img").width($(".main-panel").width());
    	}else{
    		$(".file-preview-image").find("img").width("100%");
    	}
    }
    $(window).bind('resize', function () {
    	resizeView();
    });
    
  	//Tab切换
	$title = $(".nav-justified").find("li");
	$title.click(
		function() {
			$box = $(this).attr("id") + "-box";
			$title.each(
				function() {
					$title.attr("class","");
				}
			);
			$(this).attr("class","active");
			$(".ibox-content").each(
				function() {
					$(this).hide();
					if($(this).attr("id") == $box){
						$(this).show();
					}
				}
			);
			if($(this).attr("id") == "is-on") {
				layer.load(2);
				window.location.reload();
			}else if($(this).attr("id") == "is-off") {
				var width = $('.jqGrid_wrapper').width();
		        $('#table_list').setGridWidth(width);
		        $('#table_list').trigger("reloadGrid");
			}
		}
	)
    
    //init nestable
    updateOutput($('#nestable').data('output', $('#nestable-output')));
    
  	//增
	$("#add").click(function() {
		layerDialog("添加焦点图",'__URL__/add',"90%","90%",true);
	})
}); 

//改
function edit(id){
	layerDialog("修改焦点图",'__URL__/edit?id='+id,"90%","90%",true);
}

//删
function del(id){
	layer.confirm('确定执行？', function(index){
		$.ajax({
			url:"__URL__/del",
			type:"post",
			data:{'id':id},
			success:function(json){
				var data = eval("("+json+")");
				if(data.status == 1){
					layer.msg(data.info);
					window.location.reload();
				}else{
					layer.msg(data.info);
				}
			}
		})
	    layer.close(index);
	});
}

//停用&启用
function updateStatus(id,is_on){
	layer.confirm('确定执行？', function(index){
		$.ajax({
			url:"__URL__/isEnabled",
			type:"post",
			data:{'id':id,'is_on':is_on},
			success:function(json){
				var data = eval("("+json+")");
				if(data.status == 1){
					layer.msg(data.info, {time: 1000});
				}else{
					layer.msg(data.info, {time: 1000});
					window.location.reload();
				}
				window.location.reload();
			}
		})
		layer.close(index);
	})
}
</script>
</html>